<template>
  <!-- 兑换订单子组件 -->
  <div class="box">
    <p class="p1">
      订单详情 
    </p>
    <ul class="ul1">
      <li class="listdiv" >
        <p class="p1111">{{stores.itemData.exorderId}}</p>
        <div class="listdivImg">
          <img src="@/img/门店图片/u2732.png" alt="" />
          <div class="listdivImgp">
            <p class="p7">{{ stores.itemData.note }}</p>
            <p class="p4">{{ stores.itemData.gPrice }}币</p>
            <p class="p3">{{ stores.itemData.gPrice }}币</p>
            <p class="p6">×{{ stores.itemData.number }}</p>
            <p class="p5">{{ stores.itemData.gPrice * stores.itemData.number  }}币</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ExchangeInfo } from "../../../stores/ExchangeOrder";

const stores = ExchangeInfo()



</script>

<style lang="less" scoped>
.box {
  background-color: #fff;
  width: 90vw;
  margin: 0 4vw;
  overflow: hidden;
  border-radius: 20px;

}
.p1111{
  font-size: 14px;
  color: #ccc;
  position: relative;
  top: -15px;
  left: 229px;
}
.listdiv {
  // width: 90vw;
  height: 40vw;
  background-color: white;
  display: flex;
  flex-direction: column;
  // margin: 2.333vw;
  margin: 2.3vw 0vw 4vw 0vw;
  border-radius: 2%;
  position: relative;

  button {
    width: 18vw;
    height: 6vw;
    border-radius: 3.15vw;
    border: 1px solid pink;
    background-color: #f95474;
    font-size: 1.867vw;
    color: white;
    position: absolute;
    bottom: 2.333vw;
    right: 2.333vw;
    // line-height: 6vw;
  }

  .butn1 {
    right: 22vw;
    background-color: white;
    color: #f95474;
  }

  .listdivImg {
    display: flex;
    margin-top: 5vw;
    margin-left: 5vw;

    img {
      width: 28.667vw;
      height: 28.667vw;
    }

    .listdivImgp {
      margin-left: 5.667vw;
      color: #ccc;
      font-size: 3.333vw;

      .p2 {
        display: flex;
      }

      :first-child {
        font-size: 3.333vw;
        color: black;
        margin-bottom: 2.333vw;
      }

      :last-child {
        margin-top: 2.333vw;
      }
    }
  }
}

.van-tabs van-tabs--line {
  background-color: #eefdfa;
}

.p4 {
  float: right;
  color: #333333;
}

.p3 {
  text-decoration: line-through;
  float: right;
  margin-right: 10px;
}

.p5 {
  float: right;
  color: #FF5E81;
  font-size: 16px;
  font-weight: 600;
}

.p6 {
  position: relative;
  right: -155px;
  top: 20px;
  margin: 20px 0px;
  color: #333333;
}

.p7 {
  width: 170px;
  // background-color: red;   
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ul1 {
  border-radius: 10px;
}

.p1 {
  padding-left: 4vw;
  margin-left: 6vw;
  position: relative;
  border-left: 1vw solid red;
  font-weight: bolder;
  top: 2.333vw;

  span {
    position: absolute;
    right: 3.667vw;
    font-size: 1.333vw;
    padding-top: 0.567vw;
    color: #ccc;
  }
}
</style>
